<template>
	<div ref="container"
		class="container"></div>

</template>
<script>
	import * as echarts from "echarts";
	import china from "../assets/china.json";
	import jiangsu from "../assets/city/江苏省.json"
	// console.log(jiangsu)
	// console.log(china);
	let provinceCtx = require.context("../assets/city", false, /\.json$/)
	let province = []
	
	provinceCtx.keys().forEach(item => {
		province.push(provinceCtx(item))
	})
	console.log(province)
	export default {
		mounted() {
			let myChart = echarts.init(this.$refs.container);
			echarts.registerMap("china", china);
			echarts.registerMap("jiangsu",jiangsu);
			//映射身份
			let targetProvince = china.features.find(item => item.properties.name === "重庆")
			//省份坐标
			let targetCoor = targetProvince.properties.cp;
			//所有省份的开始坐标,除去目标省份
			let allProvince = china.features.filter(item => item.properties.name !== targetProvince.properties.name);
			//得到除去目标省份以外的所有坐标
			let allProvinceCoors = allProvince.map(item => ({ [item.properties.name]: item.properties.cp }))
			// console.log(allProvinceCoors)
			//生成放射线数据
			let linesData = allProvinceCoors.map(item => {
				let fromCoor;
				for (let k in item) {
					fromCoor = item[k]
				}
				return {
					coords: [
						fromCoor,
						targetCoor
					]
				}
			})
			// console.log(linesData)

			myChart.setOption({
				visualMap: { //虚拟地图配置
					show: true,//是否显示
					min: 0,//手柄最小值
					max: 10000,//手柄最大值
					text: ['低', '高'],//手柄文字
					seriesIndex: [0],//对应设置的系列中的第0项
					inRange: { //配置地图数值颜色的渐变范围
						color: ["#a7d5f2", "#3f95ff", "#5470c6"],
					},
					calculable: true,//是否显示控制手柄
					textStyle: {//控制文字样式
						color: "#FFF" //手柄外面文字颜色
					}
				},
				geo: {
					emphasis: { //高亮 强调配置
						//focus: 'self' //聚焦强调,淡化其它选项
						label: {
							show: true,//高亮的时候是否显示item的文字
							//position: ['50%', '50%'],//文字显示的偏移
							// {a}：系列名。
							// {b}：数据名。
							// {c}：数据值。
							// formatter:(param)=>{
							// 	console.log(param)
							// }
							fontSize: '15px',
							color: 'hotpink'
						}
					},
					itemStyle: {//地图区域的多边形 图形样式。
						areaColor: {//设置地图底色
							//配置文档地址https://echarts.apache.org/zh/option.html#color
							type: 'radial', //颜色类型 放射性 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
							x: 0.5,
							y: 0.5,
							r: 0.8, //半径
							colorStops: [{ //由内往外
								offset: 0,
								color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						},
						shadowColor: 'rgba(128, 217, 248, 1)',//阴影
						shadowOffsetX: -3,
						shadowOffsetY: 4,
						shadowBlur: 10,//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
						borderColor: 'rgba(147, 235, 248, 1)', //省份边框颜色
						borderWidth: 1.5, //省份边框
					},
					type: "map",
					name: "中国地图",
					map: "china",//用 registerMap 注册的地图名称。
					zoom: 1.2,//缩放级别
					//center: [104.114129, 36.050339],//当前视角的中心点，用经纬度表示
					color: "blue",
					label: { //设置文字显示内容
						show: true,
						align: "center",
						fontSize: 12,
						color: '#fff',
						fontWeight: 700
					},
				},
				series: [
					{

						name: "中国地图",
						type: "map",
						geoIndex: 0,//对应的地图索引
						data: [
							{
								name: "江西",
								value: 3000,
							},
							{
								name: "湖南",
								value: 1000,
							},
						],
					},
					{
						name: "lines",
						type: 'lines',//射线
						zlevel: 2,//给canvas分层
						effect: {//线特效的配置
							show: true,
							symbol: "arrow",//特效图形的标记。'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
							symbolSize: 5,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
							loop: true,
							color: 'deepskyblue',
							constantSpeed: 100//配置特效图形的移动动画是否是固定速度，单位像素/秒
						},
						lineStyle: {
							// color: '#1DE9B6',
							color: "hotpink",//线条颜色
							width: .1,
							opacity: 0.8,
							curveness: 1 //弯曲弧度
						},
						// data: [
						// 	{
						// 		coords: [ //坐标
						// 			[86.9023, 41.148],//开始坐标
						// 			[104.114129, 36.050339] //结束坐标
						// 		]
						// 	}
						// ],
						data: linesData
					}
				],
				nameMap: {
					新疆维吾尔自治区: "新疆",
					甘肃回族自治区: "甘肃",
					宁夏回族自治区: "宁夏",
					广西壮族自治区: "广西",
					香港特别行政区: "香港",
					澳门特别行政区: "澳门",
				},
			});
			myChart.on("click", function (e) {
				console.log(e);
			});
		},
	};
</script>
<style>
.container {
	height: 500px;
	border: 1px solid #ccc;
	background-color: #091c47;
}
</style>
